<html><!-- Copyright (C) 2007 Laurent A.V. Szyster - Copylef GPL 2.0 -->
<head>
  <title>protocols.js > JSON</title>
  <link href="site.css" type="text/css" rel="stylesheet"></link>
  <link href="protocols.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
<div>  
  <h1><a href="index.html">protocols.js</a></h1>
  <div class="menu">
    <a href="documentation.html">Documentation</a> &gt;
    <a href="functions.html">Functions</a>
    <a href="HTTP.html">HTTP</a>
    <a href="HTML.html">HTML</a>
    <a href="CSS.html">CSS</a>
  </div>
  <h2>JavaScript Object Notation (JSON)</h2>
  <ol>
    <li><a href="#JSON.decode">decode (string)</a></li>
    <li><a href="#JSON.buffer">buffer (sb, value)</a></li>
    <li><a href="#JSON.encode">encode (value)</a></li>
    <li><a href="#JSON.templates">templates</a></li>
    <li><a href="#JSON.HTML">HTML (sb, value, name)</a></li>
    <li><a href="#JSON.view">view (values)</a></li>
    <li><a href="#JSON.errors">errors</a></li>
    <li><a href="#JSON.GET">GET (url, query, ok, headers, timeout)</a></li>
    <li><a href="#JSON.POST">POST (url, object, ok, headers, timeout)</a></li>
    <li><a href="#JSON.update">update (id, name)</a></li>
    <li><a href="#JSON.insert">insert (id, adjacency, name)</a></li>
    <li><a href="#JSON.extend">extend (id, adjacency, name)</a></li>
  </ol>
  <h3>Synopsis</h3>
  <p>
    Refresh the HTML page with a JSON object:
  </p>
  <div class="test" onclick="JSON.GET('hello-world.js')" >
    Hello <span class="template" id="who">...</span> !
  </div>
  <pre>&lt;div class=&quot;test&quot; onclick=&quot;<strong
  >JSON.GET('<a href="hello-world.js"
  >hello-world.js</a>')</strong>&quot; &gt;
  Hello &lt;span id=&quot;<strong>who</strong>&quot; &gt;...&lt;/span&gt; !
&lt;/div&gt;</pre>
  <pre>{"<strong>who</strong>": "World"}</pre>
  <p>
    By convention, HTML id attributes and CSS class names are used to link 
    JSON namespaces to elements, CSS styles, HTML templates. Sticking to this
    convention about ids and classes decouples very well the HTML page view 
    from the JSON object model.
  </p>
  <p>
    ...
  </p>
  <pre>&lt;div class=&quot;hidden&quot; id=&quot;<strong
  >Protocols.JSON.templates</strong>&quot;&gt;
  &lt;span class=&quot;<strong>who</strong>&quot;&gt;&lt;em&gt;<strong
  >&lt;json/&gt;</strong>&lt;em&gt;&lt;/span&gt;
&lt;/div&gt;</pre>
  <p>
    Note how the source above acts as a substitute of traditionnal 
    server-side templates and how it can be supported for architectural 
    and demonstration purposes by a static JSON resource instead of an actual
    service controller (<code>hello-world.js</code>).
  </p>
  <h3><a name="JSON.templates" href="#">JSON.templates</a></h3>
  <p>
    ...
  </p>
  <h3><a name="JSON.errors" href="#">JSON.errors</a></h3>
  <p>
    ...
  </p>
  <h3><a name="JSON.decode" href="#">JSON.decode (string)</a></h3>
  <p>
    ...
  </p>
  <pre 
    class="synopsis" 
    onclick="HTML.update($('json_decode'), JSON.encode(eval_synopsis(this)));"
    >JSON.decode('{' +
    '"Hello": "World!", ' +
    '"Give me": 5, '+
    '"bottles": [0.9, 9, 99, 999], ' +
    '"test": true ' +
    '}');</pre>
  <div class="test" id="json_decode" >...</div>
  <h3><a name="JSON.buffer" href="#">JSON.buffer (sb, value)</a></h3>
  <p>
    ...
  </p>
  <h3><a name="JSON.encode" href="#">JSON.encode (value)</a></h3>
  <p>
    ...
  </p>
  <pre 
    class="synopsis" 
    onclick="HTML.update($('json_encode'), eval_synopsis(this));"
    >JSON.encode({
    "Hello": "World!",
    "Give me": 5.0,
    "bottles": [0.900, 9.000, 99.000, 999.000],
    "test": (1===1)
    });</pre>
  <div class="test" id="json_encode" >...</div>
  <h3><a name="JSON.HTML" href="#">JSON.HTML (sb, value, name)</a></h3>
  <p>
    ...
  </p>
  <pre class="synopsis" onclick="eval_synopsis(this);"
    >HTML.update($('json_html_test'), JSON.HTML ([], {
    "Hello": "World!", 
    "Give me": 5,
    "bottles": [0.9, 9, 99, 999],
    "test": true
    }, "json_html").join (''));</pre>
  <div id="json_html_test" class="test">
    ...
  </div>
  <h3><a name="JSON.view" href="#">JSON.view (values)</a></h3>
  <p>
    ...
  </p>
  <pre class="synopsis" onclick="eval_synopsis(this);"
    >JSON.view({
    "Hello": "World!", 
    "Give me": 5,
    "bottles": [0.9, 9, 99, 999],
    "test": true
    });</pre>
  <div class="test">
    <div><span id="bottles">...</span> bottles</div>
    <div>Hello <span id="Hello">...</span></div>
  </div>
  <h3><a name="JSON.GET" href="#"
  >JSON.GET (url, query, ok, headers, timeout)</a></h3>
  <p>
    ...
  </p>
  <pre class="synopsis" onclick="eval_synopsis(this);"
    >var ok = function (request) {
    alert(request.responseText)
};
JSON.GET ('hello-world.js', null, ok);</pre>
  <p>
    ...
  </p>
  <h3><a name="JSON.POST" href="#"
  >JSON.POST (url, object, ok, headers, timeout)</a></h3>
  <p>
    ...
  </p>
  <pre class="synopsis" onclick="eval_synopsis(this);"
    >var ok = function (request) {
    alert(request.responseText)
};
JSON.POST ('echo.php', {'hello': 'Protocols'}, ok);</pre>
  <p>
    ...
  </p>
  <h3><a name="JSON.update" href="#">JSON.update (id)</a></h3>
  <p>
    ...
  </p>
  <h3><a name="JSON.insert" href="#">JSON.insert (id, adjacency)</a></h3>
  <p>
    ...
  </p>
  <h3><a name="JSON.extend" href="#">JSON.extend (id, adjacency)</a></h3>
  <p>
    ...
  </p>
</div>
<div class="hidden" id="Protocols.JSON.templates" >
  <span class="who"><em><json/></em></span>
</div>
<script src="protocols.js" type="text/javascript"></script>
<script src="tests.js" type="text/javascript"></script>
</body>
</html>